import React, { useState, useEffect } from 'react'
import { ContentWrap, CardWrap } from './Style.js'
import { Card, Modal, Button } from 'antd'
import OrderForm from './components/OrderForm'
import moment from 'moment'
import OrderTable from './components/OrderTable'
import { ExclamationCircleOutlined } from '@ant-design/icons'
function Ordercomponent() {
  const [FormData, setFormData] = useState({})
  function changeresult(content) {
    console.log('执行了')
    //这里必须要转换下 否则会报错
    let result = JSON.parse(JSON.stringify(content))
    result.select_date[0] = moment(result.select_date[0]).format('YYYY/MM/DD')
    result.select_date[1] = moment(result.select_date[1]).format('YYYY/MM/DD')
    setFormData(result)
    console.log(result)
    Modal.info({
      title: 'info提示框',
      icon: <ExclamationCircleOutlined />,
      content: JSON.stringify(result),
      okText: '确认',
      cancelText: '取消',
    })
  }
  useEffect(() => {
    console.log('只要条件变化了,这里面表格的数据就需要重新渲染')
  }, [FormData])
  return (
    <ContentWrap>
      <CardWrap>
        <Card title="订单管理知识点">
          <p>1.上下分成两个部分</p>
          <p>Modal页脚要是什么都没有可以填写null</p>
          <p>传值必须在onFinish里面写 </p>
        </Card>
      </CardWrap>

      {/* 订单管理开始 */}
      <CardWrap>
        <Card>
          <OrderForm chooseCity={changeresult}></OrderForm>
          <div style={{ height: '30px', width: '100%' }}></div>
          <OrderTable></OrderTable>
        </Card>
      </CardWrap>
    </ContentWrap>
  )
}

export default Ordercomponent
